
<!-- 商城 -->
<div class="page">
        
    <!-- 首部搜索栏 -->

    <div class="searchBox">
      <input type="text" placeholder="      这 种 狗 粮 最 受 欢 迎" class="a"> 
        <a href="#">
          <img src="../assets/img/搜索.png" >
        </a>
  </div>

    
    <!-- 轮播图 -->
    <ul class="slides">
      <input type="radio" id="control-1" name="control" checked>
      <input type="radio" id="control-2" name="control" >
      <input type="radio" id="control-3" name="control" >
      
      <!--  Left/Right Button  -->
      <div class="navigator slide-1">
        <label for="control-3">
          <i class="fas fa-chevron-left"></i>
        </label>
        <label for="control-2">
          <i class="fas fa-chevron-right"></i>
        </label>
      </div>
      
      <div class="navigator slide-2">
        <label for="control-1">
          <i class="fas fa-chevron-left"></i>
        </label>
        <label for="control-3">
          <i class="fas fa-chevron-right"></i>
        </label>
      </div>
      
      <div class="navigator slide-3">
        <label for="control-2">
          <i class="fas fa-chevron-left"></i>
        </label>
        <label for="control-1">
          <i class="fas fa-chevron-right"></i>
        </label>
      </div>
      <!--  /Left/Right Button  -->
      
      <li class="slide">
          <img src="../assets/img/s1.jpg" >
      </li>
      <li class="slide">
          <img src="../assets/img/s7.jpg" >
      </li>
      <li class="slide">
          <img src="../assets/img/s8.jpg" >
      </li>
      
      <div class="controls-visible">
        <label for="control-1"></label>
        <label for="control-2"></label>
        <label for="control-3"></label>
      </div>
    </ul>

    <!-- 事件列表 -->

    <div class="lb">
          <ul>
            <li routerLink="/demo-cypet/list">
              <img src="../assets/img/购物袋.png">
              <h5>新品速递</h5>
            </li>
            
              <li routerLink="/demo-cypet/list">
              <img src="../assets/img/礼物.png">
              <h5>礼盒专区</h5>
            </li>
          
              <li routerLink="/demo-cypet/list">
              <img src="../assets/img/热卖.png">
              <h5>单品热门</h5>
            </li>

            <li routerLink="/demo-cypet/list">
              <img src="../assets/img/货单.png">
              <h5>种草名单</h5>
            </li>
          </ul>
    </div>


    <div></div>
    <!-- 具体内容1  -->
    <div class="product">
      <h3>每日推荐</h3>
      <div class="sug">
        <div class="sug-card">
          
            <!-- <h4>全价狗粮</h4> -->
            <img src="../assets/img/g1.jpg">
        </div>
        <div class="sug-card">

              <h4>全价猫粮</h4>
              <img src="../assets/img/8.jpg">
        </div>
      </div>
    </div>


    <!-- 具体内容2 -->
    <div class="product1">
      <h3>猜你喜欢</h3>
      <div id="c">
        <a href="#" >
        <span>更多</span>
        <img src="../assets/img/大于号.png">
      </a>
      </div>
      
      <div class="sug">
        <div class="left">
            <img src="../assets/img/g3.png" id="d">
        </div>
        <div class="right">
              <img src="../assets/img/6.png" id="d">
        </div>
      </div>
    </div>


</div>